<template>
	<view class="content">
		<u-bar-height></u-bar-height>
		
		<view class="back" @tap="back"><uni-icons type="left" size="30"></uni-icons></view>
		
		<u-top-pic class="top-pic" :list="topInfo"></u-top-pic>
		
		<scroll-view scroll-y="true" :style="{height: scrollHeight + 'px'}" adjustBottom="true">
			<view class="songList">
				<u-single-list-image :list="songList" :geDanFunctions="geDanFunctions" :refs="ref" :show="true"></u-single-list-image>
			</view>
		</scroll-view>
		
		<u-popup-comment :list="comments" :total="total"></u-popup-comment>
		
		<view class="playerBox" style="display: none;">
			<u-player-control></u-player-control>
		</view>
	</view>
</template>

<script>
	import {song_sheet_detail, comment} from '@/API/API.js';
	import util from '@/utils/util.js';
	export default{
		data(){
			return{				
				topInfo: {},
				commentCount: 0,
				ref: 'playListPopup',
				songList: {
					songs: []
				},
				geDanFunctions: [
					{text: '收藏', type: 'collection'},
					{text: '添加歌单', type: 'add'},
					{text: '查看歌手', type: 'select'}
				],
				total: 0,
				comments: [],
				scrollHeight: 667
			}
		},
		
		onLoad(option) {
			this.songDetail(option);
			this.comment(option.id);
		},
		
		onReady(){
			setTimeout(() => {
				this.getScrollHeight();
			}, 1000);
		},
		
		methods: {
			back(){
				util.jump('navigateBack', '');
			},
			
			songDetail(id){
				song_sheet_detail(id).then(data => {
					let result = data.playlist;
					this.topInfo.title = result.name;
					this.topInfo.author = result.creator.nickname;
					this.topInfo.coverImgUrl = result.coverImgUrl;
					this.topInfo.createTime = util.formatDate(result.createTime);
					this.topInfo.subscribedCount = result.subscribedCount;
					this.topInfo.shareCount = result.shareCount;
					this.topInfo.commentCount = result.commentCount;
					this.songList.songs = result.tracks;
				});
			},
			
			comment(id){
				comment({id: id, type: 2}).then(data => {
					this.commentCount = data.total;
					this.total = data.total;
					data.hotComments.forEach((val,key) => {
						data.hotComments[key].time = util.formatDate(val.time);
					});
					this.comments = data.hotComments;
				});
			},
			
			getScrollHeight(){
				let heightArr = [];
				heightArr[0] = getApp().globalData.barHeight;
				const query = uni.createSelectorQuery().in(this);
				query.select('.top-pic').fields({size: true})
				query.select('.back').fields({size: true})
				query.exec((data) => {
					data.forEach(val => {
						heightArr.push(val.height);
					});
					this.scrollHeight = util.scrollHeight(heightArr);
				})
			}
		},
		
		onUnload(){
			uni.$emit('closePopup', this.ref);
		}
	}
</script>

<style>
	@import url("@/static/css/iconfont.css");
	.top-pic{
		width: 100%;
	}
	 
	.back{
		width: 100%;
		z-index: 9;
	}
	
	.songList{
		width: 100%;
	}
	
	.playerBox{
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); 
	}
</style>